<template>
  <div class="main-content">
   <div style="display: flex; grid-gap: 10px; align-items: flex-start;">
    <div style="flex: 1" class="card">
      <div v-for="(reply, index) in repliesList" :key="index" class="comment-item">
        <div class="comment-header">
          <span class="comment-content">{{ reply.content }}</span>
          <span class="comment-date">{{ reply.createdAt}}</span>
        </div>

        <div class="comment-image" v-if="reply.forumPosts && reply.forumPosts.imageUrl">
          <img :src="reply.forumPosts.imageUrl" alt="Post Image" />
        </div>
      </div>
      <div v-if="total===0" style="padding: 29px 0; text-align: center;font-size: 16px; color: #666">暂无回复</div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
   </div>
  </div>
</template>

<script>
import {queryById} from "@/api/forum/comments";

export default {
  name: "ReplyList",
  created() {
    this.getList();
  },
  data(){
    return{
      queryParams: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        postId: null,
        userId: null,
        content: null,
        createdAt: null,
        updatedAt: null,
        parentCommentId: null,
        status: null,
        userName: null,
      },
      total:0,
      loading:false,
      repliesList: [],
    }
  },
  methods:{
    getList(){
      // 这里应该调用获取回复的API，暂时使用评论API
      this.queryParams.userId= this.$route.params.userId;
      if (!this.queryParams.userId && this.queryParams.userId !== 0) {
        console.error('userId 不存在，请检查路由参数');
        return;
      }

      console.log("ReplyList queryParams",this.queryParams)
      queryById(this.queryParams).then((response) => {
        this.repliesList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log("ReplyList total",this.total)
        console.log("ReplyList response", response)
      })
    }
  }
};
</script>

<style scoped>
/*页面具体样式*/
.main-content{
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.comment-item {
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.comment-date {
  color: #999;
}

.comment-content {
  margin-bottom: 5px;
}

.comment-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

div .card {
   width: 50%;
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 2px 6px rgba(0,0,0,.1);
   padding: 15px;
}
</style>
